<!--网站首页新闻板块组件-->
<template>
  <div>
    <div class="news">
      <h2 class="news-title" v-if="currentParentSubColumns.length > 0">
        {{ currentParentSubColumns[0].name }}
      </h2>
    </div>
    <div class="news-block">
      <!-- 固定使用4个NewsSection组件，根据displayNews展示对应的数据 -->
      <NewsSection
        v-if="displayNews[0]"
        class="news"
        :article="displayNews[0]"
        :path="currentParentSubColumns[0].path"
      />
      <NewsSection
        v-if="displayNews[1]"
        class="news"
        :article="displayNews[1]"
        :path="currentParentSubColumns[0].path"
      />
      <NewsSection
        v-if="displayNews[2]"
        class="news"
        :article="displayNews[2]"
        :path="currentParentSubColumns[0].path"
      />
      <NewsSection
        v-if="displayNews[3]"
        class="news"
        :article="displayNews[3]"
        :path="currentParentSubColumns[0].path"
      />
    </div>
    <div class="load-more">
      <el-button type="primary" @click="handleMoreLinkClick"
      >查看更多
      </el-button>
    </div>
  </div>
</template>

<script>
import NewsSection from "@/components/NewsSection.vue";
import service from "@/utils/service";
import { mapState } from "vuex";

export default {
  components: {
    NewsSection,
  },
  data() {
    return {
      news: [], //新闻列表（包含12个新闻）
      currentGroup: 0, // 0：展示第1组(1-4)，1：展示第2组(5-8)，2：展示第3组(9-12)
      timer: null,   // 定时器句柄
    };
  },
  computed: {
    ...mapState(["subColumns", "parentColumns"]),

    currentParentColumn() {
      const path = this.$route.path;
      return this.parentColumns.find((parent) => {
        return parent.path === `/${path.split("/")[1]}`;
      });
    },

    currentParentSubColumns() {
      if (this.currentParentColumn) {
        return this.subColumns.filter(
          (sub) => sub.column_id === this.currentParentColumn.column_id
        );
      } else {
        return [];
      }
    },
    // 根据 currentGroup 分组展示，每组 4 篇文章
    displayNews() {
      // 如果文章不足4篇，直接返回全部
      if (this.news.length < 4) return this.news;
      const start = this.currentGroup * 4;
      return this.news.slice(start, start + 4);
    },
  },

  watch: {
    currentParentSubColumns: {
      handler(newval, oldval) {
        console.log("变了", newval, oldval);
        this.getArticles();
      },
      immediate: true, // 设置为true，立即触发一次
    },
  },

  mounted() {
    this.getArticles();
    // 定时切换，每10秒切换一次展示的新闻组
    this.timer = setInterval(() => {
      this.toggleGroup();
    }, 10000);
  },
  beforeDestroy() {
    // 清除定时器，避免内存泄漏
    clearInterval(this.timer);
  },
  methods: {
    //获取新闻列表
    async getArticles() {
      try {
        const subcolumnId = this.currentParentSubColumns[0]
          ? this.currentParentSubColumns[0].subcolumn_id
          : null;

        if (subcolumnId) {

          const apiUrl = "/articles/news";
          const response = await service.get(apiUrl, {
            params: {
              subcolumn_id: subcolumnId,
            },
          });

          if (response.data.code === 20041) {
            this.news = response.data.data;
            console.log('新闻',this.news)
          } else {
            console.error("获取新闻数据失败");
          }
        }
      } catch (error) {
        console.error("请求出错", error);
      }
    },

    // 查看更多按钮点击事件
    handleMoreLinkClick() {
      // 使用当前子栏目的路径进行路由跳转
      if (this.currentParentSubColumns.length > 0) {
        const path = this.currentParentSubColumns[0].path;
        console.log("更多按钮跳转的路径", path);
        this.$router.push(path);
      }
    },
    // 切换新闻组的方法
    toggleGroup() {
      this.currentGroup = (this.currentGroup + 1) % 3;
    },
  },
};
</script>

<style scoped>
.news-block {
  display: flex;
  width: 100%;
  justify-content: center;


}

.news {
  margin: 0px;
  text-align: center;
}

.news h2 {
  position: relative;
  display: inline-block;
  color: #2b547e;
}

.load-more {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  margin-top: 20px;
}

.news-title {
  margin-top: 10px;
  margin-bottom: 15px;
  letter-spacing: 0.2em;
}

.news-title::before,
.news-title::after {
  content: "";
  position: absolute;
  width: 200px; /* 调整纹理宽度 */
  height: 80px; /* 调整纹理高度 */
  opacity: 0.5; /* 控制纹理透明度 */
  top: -20px; /* 调整纹理位置的上下偏移 */
  left: -50px; /* 调整纹理位置的左右偏移 */
  z-index: -1;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%232b547e' fill-opacity='0.14' fill-rule='evenodd'/%3E%3C/svg%3E");
}
</style>
